import React from 'react'
// 引入域名
import Url from '../../../assets/js/domain.js'
import { connect } from 'react-redux'
import { setBreadcrumb } from '../../../store/common/action.js'
import { Table, Divider, Button, Popconfirm, Row, Col, Input } from 'antd';
const { Column } = Table;
const Search = Input.Search;

class VillageManagement extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			routes: [{
				path: '/index',
				breadcrumbName: '基础信息'
			}, {
				path: '/first',
				breadcrumbName: '小区管理'
			}],
			data: {},
			defaultPage: 1,
			defaultRows: 2,
			searchVal: '',
			loading: false,
		}
	}
	componentDidMount() {
		// 面包屑
		let { setBreadcrumb } = this.props;
		setBreadcrumb(this.state.routes)
		// 请求列表
		this.getList();
	}
	// 请求列表方法
	getList = (searchVal) => {
		this.setState({ loading: true });
		let formdata = new FormData();
		let wuYeId = sessionStorage.getItem("wuYeId");
		let ajaxdata = {
			"wuYe": {
				"id": wuYeId
			}
		}
		ajaxdata = JSON.stringify(ajaxdata);
		formdata.append('param', ajaxdata);
		formdata.append('rows', this.state.defaultRows);
		formdata.append('page', this.state.defaultPage);
		// 判断搜索内容不为空就添加一个搜索条件
		if (searchVal) {
			formdata.append('search', searchVal);
		}
		window.fetch(Url + '/pro/xiaoqu/listXiaoQu', {
			method: 'post',
			header: {
				"Content-Type": "application/json"
			},
			body: formdata
		}).then(res => {
			return res.json();
		}).then(res => {
			this.setState({
				data: res,
				loading: false
			})
		})
	}
	// 分页跳转
	changePage = (page) => {
		this.setState({
			defaultPage: page
		}, () => {
			this.getList();
		})
	}
	// 搜索
	search = (val) => {
		this.setState({
			searchVal: val
		}, () => {
			// 搜索传参过去
			this.getList(this.state.searchVal);
		})
	}
	// 确认删除
	confirm = (e) => {
		alert(111)
	}
	render() {
		return (
			<div>
				<Row type="flex" justify="end">
					<Col span={20}>
						<Button type="primary">新增</Button>
					</Col>
					<Col span={4}>
						<Search
							placeholder="请输入"
							onSearch={value => this.search(value)}
							enterButton
						/>
					</Col>
				</Row>
				<Table dataSource={this.state.data.root}
					rowKey={record => record.id}
					bordered
					loading={this.state.loading}
					pagination={{  // 分页
						pageSize: this.state.defaultRows,
						total: this.state.data.records,
						onChange: this.changePage,
					}}
					style={{ marginTop: '20px' }}
				>
					<Column
						title="小区名称"
						dataIndex="name"
						key="name"
						width="30%"
					/>
					<Column
						title="开发商"
						dataIndex="kaFaShang"
						key="kaFaShang"
						width="20%"
					/>
					<Column
						title="联系电话"
						dataIndex="tel"
						key="tel"
						width="10%"
					/>
					{/* <Column
						title="Tags"
						dataIndex="tags"
						key="tags"
						render={tags => (
							<span>
								{tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
							</span>
						)}
					/> */}
					<Column
						title="创建时间"
						dataIndex="cdate"
						key="cdate"
						width="20%"
					/>
					<Column
						title="操作"
						key="action"
						width="20%"
						render={(text, record) => (
							<span>
								<Button type="primary" size="small">编辑</Button>
								<Divider type="vertical" />
								<Popconfirm title="确定删除吗？" onConfirm={() => this.confirm()} okText="是" cancelText="否">
									<Button type="danger" size="small">删除</Button>
								</Popconfirm>
							</span>
						)}
					/>
				</Table>
			</div>
		)
	}
}
const mapStateToProps = (state) => {
	return {

	}
}
const mapDispatchToProps = (dispatch, ownProps) => {
	return {
		setBreadcrumb(data) {
			dispatch(setBreadcrumb(data))
		}
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(VillageManagement)